<template>
  <div class="parameterSetting b f22" @click="inputDropDown = false">
    <div class="wp">
      <el-row>
        <el-col :span="24">
          <h5 class="">软件选择</h5>
        </el-col>
      </el-row>
      <el-form :inline="true" :model="form" class="demo-form-inline mt12">
        <el-row>
          <el-col :span="9" class="f1">
            <el-form-item label="仿真软件" :label-width="90">
              <el-select v-model="form.simulator" placeholder="" class="w100" @change="getAppModules">
                <el-option  value="1" label="fastcae" />
                <!-- <el-option  value="5" label="openfoam" /> -->
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="9" class="ml40">
            <el-form-item label="仿真模块" :label-width="90" class="f1">
              <el-select v-model="form.simulateModule" placeholder="Heat Transfer" class="w100">
                <el-option v-for="(item, index) in modules" :value="item.id" :label="item.name" :key="index" />
                <el-option  value="14" label="HeatTransfer(O)" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row class="mt10">
        <el-col :span="24">
          <h5 class=""><span class="ib mr27">分组设置</span> <span class="ib pt" @click="handleAddGroup">
              <plusBtn />
            </span></h5>
        </el-col>
      </el-row>
      <el-row class="mt29">
        <el-col :span="24">
          <ul class="fx f12 lst">
            <li class=" h40 ifc ac bb pl12" style="width: 100px;">排序</li>
            <li class=" h40 ifc ac bb pl12" style="width: calc((100% - 300px) / 3);">分组名</li>
            <li class=" h40 ifc ac bb pl12" style="width: calc((100% - 300px) / 3);">groupKey</li>
            <li class=" h40 ifc ac bb pl12" style="width: calc((100% - 300px) / 3);">type</li>
            <li class=" h40 ifc ac bb pl12" style="width: 180px;">操作</li>
          </ul>
          <template v-if="groupData.length == 0 && groupForm.length == 0">
            <div class="tc"><span class="f12 c9" style="color: #999;">暂无数据</span></div>
          </template>
          <template v-for="(item, index) in groupData" :key="index">
            <el-form :model="item" :rules="groupItemsRule" ref="groupItemsRef">
              <ul class="fx f12 dataList">
                <li class="b h40 ifx ac bb pl12" style="width: 100px;">
                  <el-form-item label="" prop="orderBy" class="w91">
                    <el-input maxlength="32" v-number-input="{ textType: 'num' }" v-model="item.orderBy"
                      :disabled="!item.isEditable" placeholder="序号" clearable />
                  </el-form-item>
                </li>
                <li class="b h40 ifx ac bb pl12" style="width: 28%;">
                  <el-form-item label="" prop="groupName" class="w91">
                    <el-input maxlength="32" v-model="item.groupName" :disabled="!item.isEditable" placeholder="请输入分组名称"
                      clearable />
                  </el-form-item>
                </li>
                <li class="b h40 ifx ac bb pl12" style="width: 28%;">
                  <el-form-item label="" prop="groupKey" class="w91">
                    <el-input @input="item.groupKey = item.groupKey.replace(/^\d|[\u4e00-\u9fa5]/gi, '')" maxlength="32"
                      v-model="item.groupKey" :disabled="!item.isEditable" placeholder="请输入groupKey" clearable />
                  </el-form-item>
                </li>
                <li class="b h40 ifx ac bb pl12" style="width: 28%;">
                  <el-form-item label="" prop="type" class="w91">
                    <el-select :disabled="!item.isEditable" v-model="item.type" placeholder="请选择type" class="w100">
                      <el-option value="0" label="选中部件以赋予属性" />
                      <el-option value="1" label="分析步、作业等单条参数设置" />
                      <el-option value="2" label="选中两个部件以赋予接触条件" />
                      <el-option value="3" label="表达式等多条参数设置" />
                    </el-select>
                  </el-form-item>

                </li>
                <li v-if="item.isEditable" class=" h40 ifx ac bb pl12" style="width:  180px;">
                  <el-button type="success" @click="handleEditGroup(index)">保存</el-button>
                </li>
                <li v-else class=" h40 ifx ac bb pl12" style="width: 180px;">
                  <el-button type="success" @click="handleEdit(index)">编辑</el-button>
                  <el-button type="danger" @click="handleDeleteGroup(index)">删除</el-button>
                </li>

              </ul>
            </el-form>
          </template>
          <!-- 新增开始 -->
          <template v-for="(item, index) in groupForm" :key="index">
            <el-form :model="item" :rules="groupItemsRule" ref="addGroupRef">
              <ul class="fx f12 dataList">
                <li class="b h40 ifx ac bb pl12" style="width: 100px;">
                  <el-form-item label="" prop="orderBy" class="w91">
                    <el-input maxlength="32" v-number-input="{ textType: 'num' }" v-model="item.orderBy" placeholder="序号"
                      clearable />
                  </el-form-item>
                </li>
                <li class="b h40 ifx ac bb pl12" style="width: 28%;">
                  <el-form-item label="" prop="groupName" class="w91">
                    <el-input maxlength="32" v-model="item.groupName" placeholder="请输入分组名称" clearable />
                  </el-form-item>
                </li>
                <li class="b h40 ifx ac bb pl12" style="width:28%;">
                  <el-form-item label="" prop="groupKey" class="w91">
                    <el-input @input="item.groupKey = item.groupKey.replace(/^\d|[\u4e00-\u9fa5]/gi, '')" maxlength="32"
                      v-model="item.groupKey" placeholder="请输入分组的key" clearable />
                  </el-form-item>
                </li>
                <li class="b h40 ifx ac bb pl12" style="width: 28%;">
                  <el-form-item label="" prop="type" class="w91">
                    <el-select v-model="item.type" placeholder="请选择type" class="w100">
                      <el-option value="0" label="选中部件以赋予属性" />
                      <el-option value="1" label="分析步、作业等单条参数设置" />
                      <el-option value="2" label="选中两个部件以赋予接触条件" />
                      <el-option value="3" label="表达式等多条参数设置" />
                    </el-select>
                  </el-form-item>
                </li>
                <li class=" h40 ifx ac bb pl12" style="width: 180px;">
                  <el-button type="success" @click="handleSaveGroup(index)">保存</el-button>
                </li>
              </ul>
            </el-form>
          </template>
          <!-- 新增结束 -->
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<style lang="scss">
.conductionForm .el-form-item__content {
  flex: 0 1 240px;
}

.w329 {
  /* width: 329px !important; */
}

.w228 {
  width: 228px !important;
  flex-shrink: 0;
}

.w100 {
  width: 100% !important;
}

h5 {
  color: #323639;
}

.parameterSetting {
  min-height: 100vh;
  background-color: #fff;
  box-sizing: border-box;
  padding: 27px;
  min-width: 970px;

  .el-form--inline .el-form-item {
    width: 100%;
  }

  .wp {
    /*  width: 1200px; */
    margin: 0 auto;
    margin-left: 0;
  }

  .dataList {
    margin-top: 27px;

    .el-form-item--default {
      margin: 0;
      padding: 0;
    }
  }

  .paramsRow>div {
    margin-right: 20px;
  }

  .lst li {
    background-color: #F2F6FC;
  }

  .w91 {
    width: 98%;
  }

  .el-input {
    height: 40px;
  }

  .el-form-item__label {
    height: 40px;
    line-height: 40px;
    justify-content: flex-start;
  }

  .el-tabs__nav-wrap::after {
    visibility: hidden;
  }

  .el-tabs__item {
    padding: 0;
    width: 200px;
  }

  .tabspg .el-input {
    width: 229px;
    height: 40px;
  }

  .modelBox {
    width: 100%;
    background-color: #8C8CA9;
    height: 451.89px;
  }

  .subTitle {
    font-size: 16px;
    color: rgba(40, 45, 48, 1);
  }

  th:first-child,
  td:first-child {
    background-color: #F6F9FE;
  }
}

.startbtn,
.startbtn:active,
.startbtn:focus {
  width: 120px;
  height: 40px;
  opacity: 1;
  font-size: 14px;
  border-radius: 5px;
  color: #fff;
  background: rgba(0, 84, 254, 1);
}

.startbtn:hover {
  background-color: #3176FC;
}

h5 {
  font-size: 16px;
  font-weight: 400;
}

.dropdown {
  width: 228px;
  height: 220px;
  display: inline-block;
  border: 1px solid #DCDFE6;
  box-sizing: border-box;
  padding: 14px;
  left: 90px;
  top: 50px;
  z-index: 10;
  background-color: #fff;
}

.gree {
  width: 90px !important;
  height: 32px !important;
}
</style>
<script setup>

import { reactive, ref, onMounted, computed, watch } from 'vue'
import plusBtn from '@/components/plusBtn/Index.vue'
import { addGroup, deleteGroup, editGroup, listGroup } from '../api/group'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getAppList, getAppModuleListByAppId } from '../api/simulate'


const appList = ref([]);//软件列表
//获取仿真软件列表

function getRemoteAppList() {
  
  getAppList().then((res) => {
  appList.value = res.data
  form.simulator = '1'
  getAppModules()
  })
}

const modules = ref([]);//仿真模块
//获取仿真模块
function getAppModules() {
  getAppModuleListByAppId(form.simulator).then((res) => {
    modules.value = res.data
    if (Array.isArray(res.data) && res.data.length > 0) {
      form.simulateModule = res.data[0].id
    }
  })
}

//分组信息列表
const groupData = ref([])
//查询分组
function getGroupList() {

  if (!form.simulator || !form.simulateModule) { return }
  listGroup(form.simulateModule==14?5:1, form.simulateModule).then((res) => {
    res.data.map((item) => {
      item.isEditable = false
    })
    groupData.value = res.data
  })
}
const addGroupRef = ref()//添加分组的表单
//添加分组
function handleSaveGroup(index) {
  if (!addGroupRef.value) return
  addGroupRef.value.map(async (item) => {
    await item.validate((valid, fields) => {
      if (valid) {
        groupForm.value[index].appId = form.simulator
        groupForm.value[index].moduleId = form.simulateModule
        addGroup(groupForm.value[index]).then((res) => {
          groupForm.value = []
          getGroupList()
          ElMessage({
            message: '添加成功',
            type: 'success',
          })
        })
      } else {
        console.log('addGroupRef error submit!')
      }
    })
  })
}
//删除分组
function handleDeleteGroup(index) {
  ElMessageBox.confirm(
    '你是否确定删除本分组',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      console.log('ghg', index, groupData.value[index].id)
      deleteGroup(groupData.value[index].id).then((res) => {
        ElMessage({
          message: '删除成功',
          type: 'success',
        })
        getGroupList()

      })
    })

}

//点击编辑分组按钮
function handleEdit(index) {

  groupData.value[index].isEditable = true
}

//新增分组表单数据
const groupInfoObject = {

  "appId": '',
  "createBy": "",
  "createTime": "",
  "groupName": "",
  "groupKey": "",
  //"id": "",
  "moduleId": '',
  "updateBy": "",
  "updateTime": "",
  "type": "0"

}
const groupForm = ref([])

//添加分组表单
function handleAddGroup() {
  groupForm.value.push(groupInfoObject)
}

//表单数据
const form = reactive({
  simulator: '',
  simulateModule: '',
})
watch(form, (n, o) => {
  groupForm.value = []//切换分组的时候清空新增表单
  getGroupList()
}, {
  deep: true
})
const inputDropDown = ref(false)
const groupItemsRef = ref(null)//表单对像
const groupItemsRule = reactive({
  groupName: [
    { required: true, message: '请输入分组名称', trigger: 'blur' },
  ],
  groupKey: [
    { required: true, message: '请输入分组的key', trigger: 'blur' },
  ]
})
//保存编辑分组信息
function handleEditGroup(index) {
  if (!groupItemsRef.value) return
  groupItemsRef.value.map(async (gItem, gIndex) => {
    if (index == gIndex) {
      await gItem.validate((valid, fields) => {
        if (valid) {
          editGroup(groupData.value[index]).then((res) => {
            groupData.value[index].isEditable = false
            getGroupList()
            ElMessage({
              message: '编辑成功',
              type: 'success',
            })
          })
        } else {
          console.log('groupItemsRef error submit!')
        }
      })
    }
  })
}

onMounted(() => {
  getRemoteAppList()
})
</script>